/* eslint-disable @typescript-eslint/no-explicit-any */
// import React from 'react'
import { Button, Form, Input, message, Modal, Popconfirm, Select, Space, Table } from 'antd';
import { useEffect, useState } from 'react';
import instance from '../../api/request';
import MyEditor from '../components/MyEditor';
import { useNavigate } from 'react-router-dom';

function Index() {
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '博客标题',
      dataIndex: 'title',
      key: 'title',
    },
    {
      title: '作者',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '标签',
      key: 'bq',
      dataIndex: 'bq',
    },
    {
      title: '大图',
      key: 'img',
      dataIndex: 'img',
    },
    {
      title: '状态',
      key: 'state',
      dataIndex: 'state',
    },
    {
      title: '更新时间',
      dataIndex: 'updatedAt',
      key: 'updatedAt',
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
    },
    {
      title: '操作',
      key: 'action',
      render: (record: any) => (
        <Space size="middle">
          <a onClick={() => goDetail(record)}>查看</a>
          <a onClick={() => edit(record)}>编辑</a>
          <a onClick={() => confirm(record)}>下架</a>
          <Popconfirm
            title="！"
            description="你确定删除吗?"
            onConfirm={() => confirm(record)}
            onCancel={cancel}
            okText="确认"
            cancelText="取消"
          >
            <Button danger>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [title, setTitle] = useState('')
  const [form] = Form.useForm()
  const onFinish = (values: any) => {
    console.log('Success:', values);
    handleOk()
    if (values.id) {
      instance.put(`/api/article/${values.id}`, {
        title: values.title,//文章标题
        content: values.content,//文章内容  
      }).then(res => {
        setData(res.data)
        get()
      })
    } else {
      instance.post('/api/article', {
        title: values.title,//文章标题
        content: values.content,//文章内容 
        authorId: 47529555
      }).then(res => {
        console.log(res)
        setData(res.data)
        get()
      })
    }
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const showModal = () => {
    setIsModalOpen(true);
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const edit = (record: any) => {
    showModal()
    console.log(record)
    setTitle('编辑')
    form.setFieldsValue(record)
  }

  const nav = useNavigate()
  const goDetail = (record: any) => {
    console.log(record)
    nav(`/detail/${record.id}`, {
      state: record
    })
  }
  const confirm = (e: any) => {
    console.log(e);
    message.success('删除成功');
    setData(data.filter((data: any) => data.id !== e.id))
  };
  const cancel = (e: any) => {
    console.log(e);
    message.error('取消删除');
  };
  const [data, setData] = useState([])
  const [page, setPage] = useState(1)
  const [size, setSize] = useState(10)
  const [count, setKey] = useState<number>()
  const get = () => {
    instance.get('/api/article/list', {
      params: {
        page: page,
        pageSize: size,
        keyword: count
      }
    }).then(res => {
      console.log(res)
      setData(res.data.rows)
      setKey(res.data.count)
    })
  }
  const watch = (page: any, size: any) => {
    setPage(page)
    setSize(size)
  }

  useEffect(() => {
    get()
  },[])
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys: any) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const adde = () => {
    setTitle('新增')
    showModal()
  }
  return (
    <div>
      <Button onClick={adde}>新增博客</Button>
      <Table
        rowKey='id' rowSelection={rowSelection} columns={columns} dataSource={data}
        pagination={{
          total: count,
          showSizeChanger: true,
          showQuickJumper: true,
          onChange: watch,
          showTotal: total => `Total ${total} items`
        }}
      />
      <Modal
        title={title}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
      >
        <Form
          form={form}
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 1200 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="id"
            name="id"
            style={{ display: 'none' }}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="标题"
            name="title"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="作者"
            name="content"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="标签"
            name="bq"
          >
            <Select></Select>
          </Form.Item>

          <MyEditor key={['emotion']} />
          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              更新提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default Index 
